<template>
	<s-layout id="layout" :title="''" navbar="normal" leftIconColor="#ffffff" :autoBack="false"
 :bgColor="state.bgColor" :tabbarshow='false'
		:titleStyle="{ color: '#FFF', fontSize: '32rpx' }">
  <view id="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/user/sqbg.png)`, }">
    <view class="top">
      <view class="title">绑定手机号</view>
      <text>用于绑定您的中远直聘账号</text>
    </view>
    <view class="middle">
      <view class="bind-box">
        <view class="content">
          <uni-forms ref="resetPasswordRef" v-model="state.formData" :rules="state.rules" validateTrigger="bind">
            <!-- <uni-forms-item name="mobile" label="手机号">
              <uni-easyinput type="number" placeholder="请输入手机号" v-model="state.formData.mobile" :inputBorder="false">
              </uni-easyinput>
            </uni-forms-item> -->
            <!-- <uni-forms-item name="code" label="验证码">
              <uni-easyinput placeholder="请输入验证码" v-model="state.formData.code" :inputBorder="false" type="number"
                maxlength="4"> <template v-slot:right>
                  <button class="ss-reset-button code-btn code-btn-start" :disabled="state.isMobileEnd"
                    :class="{ 'code-btn-end': state.isMobileEnd }"
                    @tap="getSmsCode('smsRegister', state.formData.mobile)">
                    {{ getSmsTimer('smsRegister') }}
                  </button>
                </template>
              </uni-easyinput>
            </uni-forms-item> -->
            <button class="blue" v-if="'WechatMiniProgram' === sheep.$platform.name" 
			open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">使用微信手机号</button>
            <!-- <button class="submit" @tap="confirmMobile">确定</button> -->


          </uni-forms>
        </view>
      </view>
    </view>


  </view>
  </s-layout>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import sheep from '@/sheep';
import { ref, reactive, unref,computed  } from 'vue';
import { code, mobile } from '@/sheep/validate/form';
import { getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
import { onLoad } from '@dcloudio/uni-app';

onLoad((options) => {
    if(options) {
      share_options = options.share_options
    }
  })  
  let share_options = {}

const resetPasswordRef = ref(null);
// 数据
const state = reactive({
	isMobileEnd: false, // 手机号输入完毕
	formData: {
		code: '', // 验证码
		mobile: ''
	},
	rules: {
		code,
		mobile
	},
});

const bgColor = ref('transparent')
// 4.手机号
const confirmMobile = async () => {
		const validate = await unref(resetPasswordRef)
			.validate()
			.catch((error) => {
			});
		if (!validate) return;
    //   state.formData.mobile
    // )
    sheep.$api.user.postUpdateCustomerProfile(
      {mobile:state.formData.mobile}
   ).then((res) => {
      sheep.$helper.toast(res.msg);
			if (res.code === 1) {
        // setTimeout(function() {
          sheep.$store('user').getInfo();
        // }, 500);
        setTimeout(function() {
          sheep.$router.back()
				  uni.$emit('sharingParameter',share_options)
        }, 1000);
			}
		});


};

const userInfo = computed(() => sheep.$store('user').userInfo);
// 使用微信手机号
async function getPhoneNumber(e) {

// 获取到回调信息，需要code(与登录login的code不同)
// console.log("回调返回的信息：", e)
// 	uni.request({
// 		url: 'https://api.weixin.qq.com/cgi-bin/stable_token',
// 		method: 'POST',
// 		data: {
// 			appid: 'wx881218f3a06f5ed5',
// 			secret: 'e37f128a5c7ef3e184cc2fcb0180d483',
// 			grant_type: 'client_credential'
// 		},
// 		success(res) {
// 			console.log('获取access_token信息：', res)
// 			// 保存access_token的操作，小编这里样例，就直接放在data中了
// 		let	accessToken = res.data.access_token
//       console.log(res.data.access_token)
// 			uni.request({
// 				url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${res.data.access_token}`,
// 				method: 'POST',
// 				data: {
// 					code: e.detail.code
// 					// openid: _this.openid (openid非必填，所以不需要先获取用户信息，再获取手机号)
// 				},
// 				success(res) {
// 					console.log('获取的用户手机号userPhone：', res.data.phone_info.phoneNumber)
//           state.formData.mobile = res.data.phone_info.phoneNumber
// 				}
// 			})
// 		}
// 	})
		if (e.detail.errMsg !== 'getPhoneNumber:ok') {} else {
			let result = await sheep.$platform.useProvider().bindUserPhoneNumber(e.detail);
			if (result) {
			  sheep.$helper.toast('绑定成功');
        // setTimeout(() => {
          sheep.$store('user').getInfo();
        // }, 500)
        setTimeout(() => {
          sheep.$router.back()
          uni.$emit('sharingParameter',share_options)
        }, 1000)
			}
		}
	}

</script>
<style lang="scss">
page {
  width: 100%;
  height: 100%;
}

#app {
  height: 100vh;
  background-size: 100%;
  width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: $uni-bg-color;

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
  }
}

.top {
  width: 90%;
  margin: 0 auto;
  height: 450rpx;

  .title {
    padding-top: 210rpx;
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 54rpx;
    margin-bottom: 20rpx;
  }

  text {
    font-size: 30rpx;
    color: $uni-text-color;
  }
}

:deep(.u-icon__icon) {
  background: #a5b2c0;
  width: 64rpx;
  height: 64rpx;
  justify-content: center;
  border-radius: 50%;

}

.content {
  width: 90%;
  margin: 0 auto;

  :deep(.uni-forms-item.is-direction-left) {
    flex-direction: column;
    position: relative;
    margin-bottom: 30rpx !important;

    .uni-forms-item__label {
      width: 100% !important;
      color: $uni-text-color !important;
      font-weight: 500 !important;
      font-size: 28rpx !important;
      height: 80rpx !important;
      line-height: 80rpx !important;
    }

    .uni-forms-item__error {
      right: 6rpx !important;
      left: auto !important;
    }
  }

  .uni-easyinput__content-input {
    height: 88rpx !important;
    border-radius: 8px;
    background-color: $uni-bg-color;
    width: 96%;
    line-height: 90rpx;
    color: #333;
    font-size: $uni-font-size-base;
    padding-left: 20rpx;
    border: 2rpx solid #EFEFEF;
  }

  .code-btn-start {
    position: absolute;
    right: 14rpx;
    width: 200rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size: $uni-font-size-base;
    color: $uni-bg-color;
    border-radius: 32rpx;
    z-index: 99;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
    border: none;
  }

  .submit {
    width: 100%;
    height: 88rpx;
    color: $uni-bg-color;
    font-family: PingFangSC;
    color: #FFFFFF;
    font-weight: 500;
    font-size: $uni-font-size-big;
    padding: 0;
    margin: 28rpx 0 20rpx 0;
    border-radius: 50px;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
    border: none;
  }
}
.middle{
  width: 94%;
	margin: 0 auto;
  .blue{
    border: none;
   font-family: PingFangSC;
    color: $uni-color-primary;
    font-weight: 500;
    font-size: $uni-font-size-base;
    text-align: center;
    background-color: transparent;
    margin-top: 150rpx;
    &::after{
        border: none;
        background-color: transparent;
      }
      }
     
}

</style>